<template>
	<view class="main-container">
		<HeaderBar title="自驾之州" :titleColor="titleColor" :navBarBgc="headerBgc" :isFixed="true"></HeaderBar>
		<image class="headImg_map" src="http://img.abatour.com/2025-05-10/微信图片_20250510154131_1746862913365.png" mode=""></image>
		<view class="mask"></view>
		<view class="content">
			<image class="content-img" src="http://img.abatour.com/2025-05-10/矩形 1003 拷贝@3x_1746865592313.png" mode=""></image>
			<view class="content-name">{{lineData.name}}</view>
			<image class="headImg_icon" src="http://img.abatour.com/2025-05-09/草丛_1746780040280.png" mode=""></image>
			<image class="headImg_car" src="http://img.abatour.com/2025-05-10/3e1178076491f4ccce3f8dc4f90aa-1oqaV7_fw1200@3x_1746866256480.png" mode=""></image>
			<view class="content-text"> 
				熊猫大道站位于成都市成华区蓉都大道与熊猫大道交叉口，是成都地铁3号线的地下岛式车站，
				于2016年7月31日启用[1]。因位于熊猫大道而得名。因临近成都大熊猫繁育研究基地，
				后增设副站名熊猫基地南大门，但仅在本站使用。 
			</view>
		</view>
		
		<view class="container">
		    <!-- 滚动视图容器 -->
		    <scroll-view 
		      class="tab-scroll" 
		      scroll-x="true" 
		      scroll-with-animation 
		      :scroll-left="scrollLeft"
		    >
		      <!-- 动态生成的 tab 标签 -->
		      <view 
		        v-for="(item, index) in tabs" 
		        :key="index" 
		        :class="['tab-item', { active: currentTab === index }]"
		        @click="switchTab(index)"
		      >
		        {{ item }}
		      </view>
		    </scroll-view>
		</view>
		<view class="mian">
			<image class="mian-img" src="http://img.abatour.com/2025-05-10/微信图片_20250510161655_1746865610937.png" mode=""></image>
			<image class="mian-map" src="http://img.abatour.com/2025-05-10/微信图片_20250510161651_1746865617836.png" mode=""></image>
			<view class="mian-menu">A1/A2/B套餐-特色/升级玩法</view>
			<view class="mian-day" v-for="(item,index) in dayList" :key="index">
				<view class="day-info">
					<span class="day-index">DAY {{index+1}}</span>
					<view class="info-data">
						<view>宿:{{item.stay}}</view>
						<view>海拔:{{item.altitude}}M</view>
						<view>里程约:{{item.mileage}}KM</view>
					</view>
				</view>
				<view class="day-title">{{item.address}}-<span style="font-size: 28rpx;font-weight: 600;">{{item.name}}</span>-{{item.stay}}</view>
				<view class="day-tags">{{item.tags}}</view>
			</view>
			<view class="mian-memo">
				注：B套餐若不前往达古峡谷/亲猴台，将会安排前往昌珠寺/山南博物馆游
				览；以上行程在不减少参观内容及景点的情况下，可能根据当天实际情况
				调整游览顺序部分无门票纪念停留时间约10-20分钟左右，敬请谅解。
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	import HeaderBar from "@/components/HeaderBar/index.vue";  
	
	const headerBgc = ref("transparent");
	const titleColor = ref("#fff");  
	onPageScroll((e) => { 
		if (e.scrollTop > 30) {
			headerBgc.value = "#ffffff";
			titleColor.value = "#2D2D2D";
		} else {
			headerBgc.value = "transparent";
			titleColor.value = "#fff";
		}
	})
	const lineData = ref({})
	const tabs = ['行前准备', '行程安排', '交通路况', '注意事项', '行程预约']
	const currentTab = ref(0) // 当前选中的 tab
	const scrollLeft = ref(0) // 控制滚动条位置
	
	const switchTab = (index) => {
	    currentTab.value = index;
	    scrollLeft.value = (index -2) * 200;  
	}
	
	const dayList = ref([
		{address:'拉萨',stay:'索松村/林芝',altitude:'3000',mileage:'5',name:'雅鲁藏布大峡谷(近观南加巴瓦峰)',tags:'尼洋河风光、峡谷风貌、偶遇日照金山'},
		{address:'拉萨',stay:'索松村/林芝',altitude:'3000',mileage:'5',name:'雅鲁藏布大峡谷(近观南加巴瓦峰)',tags:'尼洋河风光、峡谷风貌、偶遇日照金山'},
		{address:'拉萨',stay:'索松村/林芝',altitude:'3000',mileage:'5',name:'雅鲁藏布大峡谷(近观南加巴瓦峰)',tags:'尼洋河风光、峡谷风貌、偶遇日照金山'},
	]) 
	
	onLoad((options) =>{
		if (options.info) {
			lineData.value = JSON.parse(decodeURIComponent(options.info));
			// console.log('asdfg',lineData.value);
		}
	})
</script>

<style lang="scss">
.main-container {  
	
}
.headImg_map{
	position: relative;
	top: 0;
	height: 800rpx;
	width: 100%;
}
.mask{
	position: absolute;
	top: 0;
	height: 800rpx;
	width: 100%;
	background-color: rgba(50, 50, 50, 0.7);
}
.content{
	position: absolute;
	top: 10%;
	z-index: 999;
	width: 90%;
	margin: 5%;
	.content-img{
		height: 120rpx;
		width: 100%;
	}
	.content-name{
		position: relative;
		top: -110rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 38rpx;
		color: #1B9C61;
		padding: 0rpx 0 0 30rpx;
		
	}
	.headImg_icon{
		position: relative;
		top: -107rpx;
		width: 100%;
		height: 50rpx;
	}
	.headImg_car{
		height: 130rpx;
		width: 240rpx;
		position: relative;
		top: -230rpx;
		float: right;
		z-index: 99;
	}
	.content-text{
		// border: 1rpx solid;
		background-color: #fff;
		width: 90%;
		position: absolute;
		top: 120rpx;
		padding: 80rpx 5%;
		border-radius: 10rpx;
	}
}
/* 容器样式 */
.container {
  position: relative;
  top: -15rpx;
  width: 100%;
  background-color: #1B9C61;
  border-radius: 10rpx;
}

/* 滚动视图样式 */
.tab-scroll {
  white-space: nowrap; /* 防止换行 */
  overflow-x: auto; /* 水平滚动 */
  padding: 10px 0 14px 0;
}

/* tab 样式 */
.tab-item {
  display: inline-block;
  margin: 0 30px;
  padding: 10px 0px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  border-bottom: 2px solid transparent; /* 默认无下划线 */
}

.tab-item.active {
  color: #fff;
  border-bottom: 2px solid #fff; /* 选中时加下划线 */
}
.mian{ 
	padding-bottom: 20%;
	border-radius: 10rpx;
	.mian-img{
		width: 50%;
		padding:70rpx 25% 30rpx 25%;
		height: 150rpx;
	}
	.mian-map{
		width: 94%;
		padding:0 3%;
		height: 360rpx;
	}
	.mian-menu{
		background-color: #B96E16;
		text-align: center;
		color: #fff;
		padding: 10rpx;
		font-size: 32rpx;
		font-weight: 600;
		border-radius: 10rpx;
		width: 70%;
		margin:5% 15%;
	}
	.mian-day{
		margin: 0 3%;
		padding: 30rpx 0;
		border-bottom: 1rpx dashed #9e9e9e;
		.day-info{
			display: flex;
			.day-index{
				color: #fff;
				background-color: #B96E16;
				padding: 10rpx;
				border-top-left-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
			}
			.info-data{
				padding: 0 20rpx;
				display: flex;
				gap: 20rpx;
				background-color: #F3F3F3;
				align-items: center;
				border-bottom-right-radius: 10rpx;
				font-size: 22rpx;
			}
			
		}
		.day-title{
			font-size: 26rpx;
			margin: 20rpx 0;
		}
		.day-tags{
			font-size: 24rpx; 
		}
	}
	.mian-memo{
		margin: 0 3%;
		padding: 50rpx 0;
		font-size: 24rpx; 
	}
}
</style>
